<template>
  <div class="iKCdHH">
    <div class="fCytZy">
      <div class="sc-1d9uflq-1 kjzgGw">
        <h1 class="cmoiYo">创建应用脚手架</h1>
        <p class="hVuhLe">初始化你的项目工程结构</p>
        <div class="fyoXML">
          <el-form ref="form" :model="form" :rules="rules" label-width="160px" style="width:100%">

            <el-form-item label="工程类型" prop="packageType">
              <el-radio-group v-model="form.packageType">
                <el-radio :label="item.label" v-for="(item , index) in packageTypeList" :key="index">
                  {{ item.name }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-divider content-position="left">信息</el-divider>

            <div>
              <el-form-item label="工程标识(artifactId)" prop="artifactId">
                <el-input v-model="form.artifactId"></el-input>
              </el-form-item>
              <el-form-item label="工程组标识(groupId)" prop="groupId" v-if="form.packageType != 'npm'">
                <el-input v-model="form.groupId"></el-input>
              </el-form-item>
              <el-form-item label="工程域名" prop="domain">
                <el-input placeholder="请输入内容" v-model="form.domain">
                  <template slot="prepend">http://</template>
                  <template slot="append">.paas.your-domain.com</template>
                </el-input>
              </el-form-item>
            </div>

            <el-divider @click="showParams = !showParams" content-position="left">参数</el-divider>

            <el-form-item label="中台版本" v-if="form.packageType != 'npm'" prop="alinesnoVersion">
              <el-radio-group v-model="form.alinesnoVersion">
                <el-radio v-for="(bootVersion , index) in bootVersionList" :key="index"
                          :label="bootVersion.bootName" >{{bootVersion.bootVersion}}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="环境检测" prop="checkEnv">
              <el-switch v-model="form.checkEnv"></el-switch>
            </el-form-item>

            <el-form-item label="生成示例" prop="generatorDemo">
              <el-switch v-model="form.generatorDemo"></el-switch>
            </el-form-item>

            <el-form-item label="依赖组件" v-if="form.packageType != 'npm'" prop="dependency">
              <el-checkbox-group v-model="form.dependency">
                <el-checkbox v-for="(item , index) in dependencyList"
                             :key="index"
                             :label="item.id">
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="UI版本" prop="alinesnoUI" v-if="form.packageType == 'npm'">
              <el-radio-group v-model="form.alinesnoUI">
                <el-radio label="1.3.2"></el-radio>
                <el-radio label="1.3.5"></el-radio>
                <el-radio label="latest"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="JDK版本" prop="jdk" v-if="form.packageType != 'npm'">
              <el-radio-group v-model="form.jdk">
                <el-radio label="11"></el-radio>
                <el-radio label="8"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-divider content-position="left">生成</el-divider>

            <el-form-item>
              <el-button type="primary" @click="onSubmit"><i class="el-icon-download"></i> 生成代码</el-button>
              <el-button @click="deployToGit"><i class="el-icon-s-promotion"></i> 集成仓库</el-button>
<!--              <el-button type="danger" @click="shareProjectGit"><i class="el-icon-link"></i> 分享工程</el-button>-->
            </el-form-item>
          </el-form>

        </div>
      </div>
    </div>

    <el-dialog
      title="分享工程"
      :visible.sync="showShareDialog"
      width="980px">

      <div>
        <div style="margin-bottom:20px;">链接地址：</div>
        <el-input placeholder="分享链接地址" v-model="shareLink" class="input-with-select">
          <el-button slot="append" @click="copyShareLink" icon="el-icon-copy-document"></el-button>
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
            <el-button @click="showShareDialog = false">关闭</el-button>
          </span>
    </el-dialog>

  </div>
</template>

<script>

  import MonacoEditor from 'monaco-editor-vue';
  import {fetchBootVersionList, initSeedInfo} from "./api";
  import {downLoadZip} from "alinesno-ui/src/utils/zipdownload";

  export default {
    components: {
      MonacoEditor
    },
    data() {
      return {
        bootVersionList:[],
        showShareDialog: false,
        fullscreenLoading: false,
        showParams: false,
        editor: null, //文本编辑器
        previewCodeDialog: false,
        packageTypeList: [
          {name: 'Maven', label: 'maven'},
          {name: 'Npm', label: 'npm'},
        ],
        shareLink: '',
        form: {
          projectName: '',
          projectCode: '',
          projectIcon: '',
          artifactId: 'alinesno-cloud-demo',
          groupId: 'com.alinesno.cloud.busines.demo',
          alinesnoUI: 'latest',
          domain: '',
          checkEnv: true,
          generatorDemo: true,
          jdk: '11',
          delivery: false,
          packageType: 'maven',
          alinesnoVersion: '2.1.2',
          dependency: ['1', '4'],
        },
        rules: {
          artifactId: [
            {required: true, message: '请输入项目名称', trigger: 'blur'},
          ],
          groupId: [
            {required: true, message: '请确认所在项目组', trigger: 'blur'},
          ],
          domain: [
            {required: true, message: '请输入自定义域名', trigger: 'blur'},
          ],
          dependency: [
            {required: true, message: '至少选择1个依赖组件', trigger: 'blur'},
          ]
        },
        dependencyList: []
      }
    },
    mounted() {
        fetchBootVersionList().then(resp=>{
          this.bootVersionList = resp.data
        })
      this.form.projectName = sessionStorage.getItem("projectName");
      this.form.projectCode = sessionStorage.getItem("projectCode");
      this.form.projectIcon = sessionStorage.getItem("projectIconSelect");
      this.initInfo();
    },
    methods: {
      initInfo() {
        initSeedInfo().then(response => {
          this.form.domain = Math.random().toString(36).slice(-8);
          this.dependencyList = response.templates;
        });
      },
      onChange(value) {
        console.log(value);
      },
      copyShareLink() {

      },
      shareProjectGit() {
        this.showShareDialog = true;
      },
      deployToGit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {

            sessionStorage.setItem("seedProjectCode", JSON.stringify(this.form));

            const path = "/build/projectInfo/seed";
            this.$router.push(path);
          }
        });
      },
      handleNodeClick(data) {
        console.log(data);
      },
      onSubmit() {
        console.log('submit!');
        this.$refs['form'].validate((valid) => {
          if (valid) {

            this.$message({
              message: '正在生成工程代码，请稍等 ....',
              type: 'success'
            });

            const queryParams = new URLSearchParams();
            queryParams.append('artifactId', this.form.artifactId)
            queryParams.append('domain', this.form.domain)
            queryParams.append('groupId', this.form.groupId)
            queryParams.append('checkEnv', this.form.checkEnv)
            queryParams.append('generatorDemo', this.form.generatorDemo)
            queryParams.append('jdk', this.form.jdk)
            queryParams.append('delivery', this.form.delivery)
            queryParams.append('packageType', this.form.packageType)
            queryParams.append('alinesnoVersion', this.form.alinesnoVersion)
            queryParams.append('dependency', this.form.dependency)
            queryParams.append('alinesnoUI', this.form.alinesnoUI)
            const url = '/com/alinesno/cloud/initializr/initiallizrSeed/generatorSeedDownload?' + queryParams.toString();
            downLoadZip(url);

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">

  @import '@/asserts/css/build/component.scss';

  .iHjquI {
    margin-top: 50px;
    display: block;
    text-align: left;

    button {
      margin-right: 20px;
    }
  }

  .label-text {
    float: left;
    margin-right: 20px;
    font-size: 13px;
    color: #555;
    width: 50px;
    line-height: 50px;
  }

  .bwQYqK {
    border: 0px !important;
    border-bottom: 2px solid #ced6e0 !important;
    border-radius: 0px !important;
    width: calc(100% - 90px) !important;
  }

  .kjzgGw {
    margin-bottom: 0px !important;
  }

  .iKCdHH {
    padding-top: 0px !important;
  }

  .fyoXML {
    padding-top: 20px;
  }

  aside {
    background: #fff;
  }

</style>


